{% extends 'base.html' %}
{% load staticfiles %}
{% load platfom_tags %}


{% block base_title %}
    {{ title }}
{% endblock base_title %}


{% block base_content %}
    <!-- 右边主体 -->
    <div class="app-content">
        <div class="app-content-body fade-in-up">
            <div class="padder" style="padding-top: 10px;">

                <div class="col-md-12" style="padding-left: 0; padding-right: 0;">
                    <div class="panel panel-default" id="body-content">
                        <div class="panel-heading">
                            <div style="display: block; border-left: 5px solid #1c2b36; padding-left: 10px; font-size: 20px; font-weight: bolder; line-height: 25px;color: #1c2b36;">
                                {{ title }}
                            </div>
                        </div>

                        <div class="panel-body" id="table_content">

                            <div>
                                <a class="btn btn-sm btn-default" data-toggle="modal"
                                   data-target="#AddOtherPlatformModal">
                                    <i class="fa fa-plus"></i> 添加平台
                                </a>

                                <!-- 功能 -->
                                <form class="navbar-form pull-right " role="search" style="margin-top: 0;">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input type="text" name="keyword"
                                                   class="form-control input-sm bg-light no-border rounded "
                                                   placeholder="关键词查找记录" style="width: 150px;">
                                            <span class="input-group-btn">
                                            <button type="submit" class="btn btn-sm bg-auto rounded">
                                                <i class="fa fa-search"></i>
                                            </button>
                                        </span>
                                        </div>
                                    </div>
                                </form>
                                <span style="font-size: 14px; padding-top: 5px;" class="pull-right">共 <b
                                        style="color: orangered">{{ platform_nums }}</b> 条</span>
                            </div>

                            <!-- 列表 -->
                            <div class="row">
                                <div class="col-sm-12">
                                    <table class="table table-striped table-bordered">
                                        <!-- 标题行 -->
                                        <thead>
                                        <tr role="row">
                                            <th class="text-center" width="60">ID</th>
                                            <th class="text-center" width="200">平台名称</th>
                                            <th class="text-center">地址</th>
                                            <th class="text-center" width="200">用户名</th>
                                            <th class="text-center" width="200">密码</th>
                                            <th class="text-center" width="200">更新人</th>
                                            <th class="text-center" width="200">更新时间</th>
                                            <th class="text-center" width="200">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        {% for each_platform in platforms.object_list %}
                                            <tr class="gradeX odd" role="row">
                                                <td class="text-center">{{ forloop.counter }}</td>
                                                <td class="text-center"
                                                    style="vertical-align:middle;">{{ each_platform.name }}
                                                </td>
                                                <td class="text-center"
                                                    style="vertical-align:middle;"><a href="{{ each_platform.url }}" target="_blank">{{ each_platform.url }}</a>
                                                </td>


                                                {% Get_PlatForm_Info request.user.id each_platform.id as infos %}

                                                <td class="text-center"
                                                    style="vertical-align:middle;">
                                                    {% if infos %}
                                                        {% for each in infos %}
                                                            {{ each.username }}
                                                        {% endfor %}
                                                    {% else %}
                                                        暂无
                                                    {% endif %}
                                                </td>

                                                <td class="text-center"
                                                    style="vertical-align:middle;">
                                                    {% if infos %}
                                                        {% for each in infos %}
                                                            {{ each.password }}
                                                        {% endfor %}
                                                    {% else %}
                                                        暂无
                                                    {% endif %}
                                                </td>

                                                <td class="text-center"
                                                    style="vertical-align:middle;">
                                                    {% if infos %}
                                                        {% for each in infos %}
                                                            {{ each.update_user.chinese_name }}
                                                        {% endfor %}
                                                    {% else %}
                                                        暂无
                                                    {% endif %}
                                                </td>

                                                <td class="text-center"
                                                    style="vertical-align:middle;">
                                                    {% if infos %}
                                                        {% for each in infos %}
                                                            {{ each.update_time }}
                                                        {% endfor %}
                                                    {% else %}
                                                        暂无
                                                    {% endif %}
                                                </td>

                                                <td class="text-center" style="vertical-align:middle;">
                                                    <a class="btn btn-xs" data-toggle="modal"
                                                       data-target="#EditPlatformUserModal{{ each_platform.id }}"
                                                       style="background-color: #009688;color: white;">
                                                        编辑用户
                                                    </a>
                                                    <a href="{{ each_platform.url }}" target="_blank" class="btn btn-xs"
                                                       style="background-color: #f05050;color: white;">
                                                        打开平台
                                                    </a>
                                                </td>
                                            </tr>
                                        {% endfor %}

                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>

                        <!-- 页码 -->
                        <div class="panel-footer" style="padding-top: 0; padding-bottom: 0;">
                            <div class="text-center">
                                <ul class="pagination" style="margin-top: 10px; margin-bottom: 10px;">

                                    <!-- 上一页 -->
                                    {% if platforms.has_previous %}
                                        <li><a href="?{{ platforms.previous_page_number.querystring }}">上一页<span
                                                class="sr-only"></span></a></li>
                                        <li><a href="?{{ platforms.previous_page_number.querystring }}">&laquo;<span
                                                class="sr-only"></span></a></li>
                                    {% endif %}

                                    <!-- 页码 -->
                                    {% for page in platforms.pages %}
                                        {% if page %}
                                            <!-- 当前页 -->
                                            {% ifequal page platforms.number %}
                                                <li class="active"><a href="?page={{ page }}">{{ page }}<span
                                                        class="sr-only">(current)</span></a></li>
                                                <!-- 其它页 -->
                                            {% else %}
                                                <li><a href="?page={{ page }}">{{ page }}<span
                                                        class="sr-only"></span></a></li>
                                            {% endifequal %}
                                            <!-- 省略页 -->
                                        {% else %}
                                            <li><a href="">...<span class="sr-only"></span></a></li>
                                        {% endif %}
                                    {% endfor %}

                                    <!-- 下一页 -->
                                    {% if platforms.has_next %}
                                        <li><a href="?{{ platforms.next_page_number.querystring }}">&raquo;<span
                                                class="sr-only"></span></a></li>
                                        <li><a href="?{{ platforms.next_page_number.querystring }}">下一页<span
                                                class="sr-only"></span></a></li>
                                    {% endif %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock base_content %}

{% block base_footer_html %}
    {% for each_platform in platforms.object_list %}
        <div class="modal inmodal" id="EditPlatformUserModal{{ each_platform.id }}" tabindex="-1" role="dialog"
             aria-hidden="true"
             data-backdrop="static">
            <div class="modal-dialog" style="width: 450px;">
                <div class="modal-content" style="margin-top: 100px;">

                    <div class="modal-header"
                         style="background-color: #1c2b36; color: white;padding-top: 10px; padding-bottom: 10px;">
                        <button type="button" class="close" data-dismiss="modal">
                            <i class="icon-close" style="font-size: 18px;"></i>
                        </button>
                        <h4 class="modal-title">修改用户</h4>
                    </div>

                    <form method="post" id="id_EditPlatformUserForm{{ each_platform.id }}">
                        <div class="modal-body" style="height: 110px;">

                            <input type="hidden" name="platform_id" value="{{ each_platform.id }}">

                            {% Get_PlatForm_Info request.user.id each_platform.id as infos %}

                            <input type="hidden" name="pu_id" value="{% if infos %}{% for each in infos %}{{ each.id }}{% endfor %}{% else %}{% endif %}">

                            <div class="form-group"
                                 style="vertical-align: middle;line-height: 34px;padding-bottom: 30px;">
                                <div class="col-md-3">
                                    <span style="font-size: 14px;">用户名：</span>
                                </div>
                                <div class="col-md-9" style="padding: 0;">
                                    <input type="text" class="form-control" placeholder="用户名"
                                           maxlength="30" name="username" required=""
                                           value="{% if infos %}{% for each in infos %}{{ each.username }}{% endfor %}{% else %}{% endif %}">
                                </div>
                            </div>

                            <div class="form-group"
                                 style="vertical-align: middle;line-height: 34px;padding-bottom: 30px;">
                                <div class="col-md-3">
                                    <span style="font-size: 14px;">密码：</span>
                                </div>
                                <div class="col-md-9" style="padding: 0;">
                                    <input type="text" class="form-control" placeholder="密码"
                                           maxlength="50" name="password" required=""
                                           value="{% if infos %}{% for each in infos %}{{ each.password }}{% endfor %}{% else %}{% endif %}">
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="modal-footer" style="padding-right: 15px;padding-top: 10px; padding-bottom: 10px;">
                        <a class="btn btn-sm btn-default" data-dismiss="modal">取消</a>
                        <a class="btn btn-sm btn-default" id="id_EditPlatformUserBtn{{ each_platform.id }}">修改</a>
                    </div>

                </div>
            </div>
        </div>

        <script>
            $(function () {
                // 提交表单
                $('#id_EditPlatformUserBtn{{ each_platform.id }}').on('click', function () {
                    $.ajax({
                        cache: false,
                        type: "POST",
                        url: "{% url 'platform_management:platform_user_edit' %}",
                        data: $('#id_EditPlatformUserForm{{ each_platform.id }}').serialize(),
                        async: true,
                        beforeSend: function (xhr, settings) {
                            xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                        },
                        success: function (data) {
                            if (data.status == 'success') {
                                window.location.reload();
                            } else if (data.status == 'failed') {
                                window.alert(data.msg);
                            }
                        }
                    });
                });
            })
        </script>
    {% endfor %}

    <div class="modal inmodal" id="AddOtherPlatformModal" tabindex="-1" role="dialog"
         aria-hidden="true"
         data-backdrop="static">
        <div class="modal-dialog" style="width: 450px;">
            <div class="modal-content" style="margin-top: 100px;">

                <div class="modal-header"
                     style="background-color: #1c2b36; color: white;padding-top: 10px; padding-bottom: 10px;">
                    <button type="button" class="close" data-dismiss="modal">
                        <i class="icon-close" style="font-size: 18px;"></i>
                    </button>
                    <h4 class="modal-title">添加个人平台</h4>
                </div>

                <form method="post" id="id_AddOtherPlatformForm">
                    <div class="modal-body" style="height: 110px;">

                        <div class="form-group"
                             style="vertical-align: middle;line-height: 34px;padding-bottom: 30px;">
                            <div class="col-md-3">
                                <span style="font-size: 14px;">平台名称：</span>
                            </div>
                            <div class="col-md-9" style="padding: 0;">
                                <input type="text" class="form-control" placeholder="平台名称" maxlength="50" name="name"
                                       required="">
                            </div>
                        </div>

                        <div class="form-group"
                             style="vertical-align: middle;line-height: 34px;padding-bottom: 30px;">
                            <div class="col-md-3">
                                <span style="font-size: 14px;">平台 URL：</span>
                            </div>
                            <div class="col-md-9" style="padding: 0;">
                                <input type="text" class="form-control" placeholder="平台 URL" maxlength="200" name="url"
                                       required="">
                            </div>
                        </div>
                    </div>
                </form>

                <div class="modal-footer" style="padding-right: 15px;padding-top: 10px; padding-bottom: 10px;">
                    <a class="btn btn-sm btn-default" data-dismiss="modal">取消</a>
                    <a class="btn btn-sm btn-default" id="id_AddOtherPlatformBtn">添加</a>
                </div>

            </div>
        </div>
    </div>

    <script>
        $(function () {
            // 提交表单
            $('#id_AddOtherPlatformBtn').on('click', function () {
                $.ajax({
                    cache: false,
                    type: "POST",
                    url: "{% url 'platform_management:platform_other_add' %}",
                    data: $('#id_AddOtherPlatformForm').serialize(),
                    async: true,
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    },
                    success: function (data) {
                        if (data.status == 'success') {
                            window.location.reload();
                        } else if (data.status == 'failed') {
                            window.alert(data.msg);
                        }
                    }
                });
            });
        })
    </script>
{% endblock base_footer_html %}
